<!doctype html>
<html lang="ch">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="左右结构项目，属于大人员的社交工具">
        <meta name="keywords" content="左右结构项目 社交 占座 ">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>个人中心</title>
        <script src="static/js/jquery.min.js"></script>
        <script src="static/js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $(".meun-item").click(function() {
                    $(".meun-item").removeClass("meun-item-active");
                    $(this).addClass("meun-item-active");
                    var itmeObj = $(".meun-item").find("img");
                    itmeObj.each(function() {
                        var items = $(this).attr("src");
                        items = items.replace("_grey.png", ".png");
                        items = items.replace(".png", "_grey.png")
                        $(this).attr("src", items);
                    });
                    var attrObj = $(this).find("img").attr("src");
                    ;
                    attrObj = attrObj.replace("_grey.png", ".png");
                    $(this).find("img").attr("src", attrObj);
                });
                $("#topAD").click(function() {
                    $("#topA").toggleClass(" glyphicon-triangle-right");
                    $("#topA").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topBD").click(function() {
                    $("#topB").toggleClass(" glyphicon-triangle-right");
                    $("#topB").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topCD").click(function() {
                    $("#topC").toggleClass(" glyphicon-triangle-right");
                    $("#topC").toggleClass(" glyphicon-triangle-bottom");
                });
                $(".toggle-btn").click(function() {
                    $("#leftMeun").toggleClass("show");
                    $("#rightContent").toggleClass("pd0px");
                })
            })
        </script>
        <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="static/person/js/respond.min.js"></script>
        <![endif]-->
        <link href="static/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="static/person/css/common.css" />
        <link rel="stylesheet" type="text/css" href="static/person/css/slide.css" />
        <link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="static/person/css/flat-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="static/person/css/jquery.nouislider.css">

        <script type="text/javascript" src="static/jquery/jquery.validate.min.js"></script>
        <script type="text/javascript" src="static/jquery/messages_zh.js"></script>
    </head>
    <style>
        label.error {
            margin-left: 10px;
            color: red;
            font-size: small;
        }

        input.error {
            border: solid 1px red;
        }

    </style>
    <script type="text/javascript">
       $(function () {

           $.ajax({
               type:"post",
               url:"getUserBySession",
               async:true,
               success:function(data){
                   $("#userName1").text(data.username);
                   $("#userEmail").text(data.email);
               },
               error: function (data) {
                   alert("异常"+data);
               }
           });
       })
    </script>
    <body>
        <div id="wrap">
            <!-- 左侧菜单栏目块 -->
            <div class="leftMeun" id="leftMeun">
                <div id="logoDiv">
                    <p id="logoP"><img id="logo" alt="你的logo" src="static/person/images/logo.png"><span>你的信息</span></p>
                </div>
                <div id="personInfor">
                    <p id="userName1">用户的名称！！</p>
                    <p><span id="userEmail">用户的邮箱!!</span> 欢迎使用此平台 <a href="#" target="_blank" title="模板之家">升级会员</a> - Collect from <a href="#" title="网页模板" target="_blank">续费会员</a></p>
                    <p>
                        <a href="/loginOut">退出登录</a>
                    </p>
                </div>
                <div class="meun-title">账号管理</div>
                <div class="meun-item meun-item-active" href="#sour" aria-controls="sour" role="tab" data-toggle="tab"><img
                        src="static/person/images/icon_card_grey.png">个人信息
                </div>
                <div class="meun-item meun-item-active" href="#order" aria-controls="sour" role="tab" data-toggle="tab"><img src="static/person/images/icon_source.png">订单管理</div>
                <div class="meun-item" href="#char" aria-controls="char" role="tab" data-toggle="tab"><img src="static/person/images/icon_chara_grey.png">权限管理</div>
                <div class="meun-item" href="#user" aria-controls="user" role="tab" data-toggle="tab"><img src="static/person/images/icon_user_grey.png">用户管理</div>
                <div class="meun-item" href="#chan" aria-controls="chan" role="tab" data-toggle="tab"><img src="static/person/images/icon_change_grey.png">修改密码</div>

            </div>
            <!-- 右侧具体内容栏目 -->
            <div id="rightContent">
                <a class="toggle-btn" id="nimei">
                    <i class="glyphicon glyphicon-align-justify"></i>
                </a>
                <!-- Tab panes -->
                <div class="tab-content">
                    <!--修改信息模块-->
                    <div role="tabpanel" class="tab-pane active" id="sour">

                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">

                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">

                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">

                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">

                                </div>
                            </div>
                            <div class="tablebody">
                                <form id="regForm">
                                    <fieldset>
                                        <legend>个人中心</legend>
                                        <div id="conten">
                                            <div >
                                                <ul >
                                                    <li >
                                                        <span class="userImgTabLiSpan userImgTabLiShow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;上传头像</span>
                                                    </li>
                                                </ul>
                                                <ul id="userImgBoxUl" class="userImgBoxUl">
                                                    <li>
                                                        <div >
                                                            <ul >
                                                                <li >
                                                                    <div >
                                                                        <form >

                                                                            <div class="form-group">
                                                                                <input type="file" name="file" id="file" onchange="uploadPic()" >
                                                                            </div>
                                                                            <input type="hidden" id="pic">

                                                                        </form>
                                                                    </div>
                                                                </li>

                                                                <li class="localFileLi">
                                                                    <div class="form-group">
                                                                        <div ></div>
                                                                        <img id="pic1"  style="height: 200px;width: 200px;">
                                                                    </div>
                                                                    <div >
                                                                        <p >头像预览</p>
                                                                        <p>图片格式：gif jpg png</p>
                                                                        <p>最适尺寸：200*200px </p>
                                                                    </div>
                                                                </li>
                                                            </ul>

                                                        </div>

                                                    </li>

                                                </ul>
                                            </div>
                                        </div>
                                        <p id="n">
                                        <p>昵称：<input id="username" name="username" type="text"></p>
                                        <p>电话号码：<input id="phone" name="phone" type="text"></p>
                                        <p>电子邮箱：<input id="email" name="email" type="text"></p>
                                        <p>性别：
                                            <tr>
                                                <td><input type="radio" name="sex" value="男" id="man">男
                                                    <input type="radio" name="sex" value="女" id="woman">女
                                                </td>
                                            </tr>
                                        </p>
                                        <p id="money">余额：<!--<p id="money"></p>--></p>
                                        <p>
                                            <input id="regBtn" value="修改" type="button">
                                            <input id="embody" value="一键提现" type="button">
                                        </p>
                                    </fieldset>
                                </form>
                                <script type="text/javascript">
                                    $('#username').blur(function() {

                                        var username = $(this).val();
                                        if (username != "") {
                                            $.ajax({
                                                url: "checkUserName",    //请求的url地址
                                                contentType: "application/json; charset=utf-8",
                                                dataType: "json",   //返回格式为json
                                                async: true,//请求是否异步，默认为异步，这也是ajax重要特性
                                                data: JSON.stringify({"username": username}), //使用这个函数可以转化为json格式   //参数值
                                                type: "POST",   //请求方式
                                                /*  beforeSend:function(){
                                                        //请求前的处理
                                                    }, */
                                                success: function (data) {
                                                    //alert(data)
                                                    /*  因为服务器端返回的是json对象所以可以直接用对象名。属性名 */
                                                    /* JSON.stringify用于把json对象解析成string
                                                    JSON.parse()用于把json字符串解析成json对象 */
                                                    if (data) {
                                                        $('#n').css("color", "green");
                                                        $('#n').html("该用户名可以使用");
                                                    } else {
                                                        $('#n').css("color", "red");
                                                        $('#n').html("该用户名已被用");
                                                        $('#regBtn').attr("disabled", "disabled");
                                                    }
                                                },
                                            });
                                        }
                                    })
                                    //手机号码验证
                                    jQuery.validator
                                        .addMethod(
                                            "isMobile",
                                            function (value, element) {
                                                var length = value.length;
                                                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                                                return this.optional(element)
                                                    || (length == 11 && mobile.test(value));
                                            }, "请正确填写您的手机号码")
                                    //开机执行
                                    $(function () {
                                        //回显用户信息
                                        $.ajax({
                                            type: "post",
                                            url: "/getUserBySession",
                                            contentType: "application/json; charset=utf-8",
                                            //datatype: "json",
                                            success: function (data) {
                                                //alert("成功");
                                                //location.reload()
                                                $("#userName1").val(data.username);
                                                $("#userEamil").val(data.email);
                                            },
                                            error: function () {
                                                alert("失败");
                                            }
                                        });






                                        //表单验证
                                        $("#regForm").validate({
                                            rules: {
                                                username: {
                                                    required: true,
                                                    checkUsername: true
                                                },
                                                phone: {
                                                    required: true,
                                                    minlength: 11,
                                                    isMobile: true
                                                },
                                                email: {
                                                    required: true,
                                                    email: true
                                                }
                                            },
                                            messages: {
                                                username: {
                                                    required: "用户名不能为空",
                                                    checkUsername: "用户名已存在"
                                                },
                                                phone: {
                                                    required: '请输入手机号码',
                                                    remote: '手机号格式错误'
                                                },
                                                email: {
                                                    required: "请输入邮箱地址",
                                                    remote: '邮箱地址格式错误'
                                                }
                                            }
                                        });
                                    });

                                    // 按钮点击事件
                                    $("#regBtn").click(function () {

                                        <!-- 表单验证 -->
                                       // if (!$("#regForm").valid()) return;

                                        //var v = $("input:radio[name='sex']:checked").val()
                                        $.ajax({
                                            type: "post",
                                            url: "/uploadUser",
                                            contentType: "application/json; charset=utf-8",
                                            datatype: "json",
                                            data: JSON.stringify({
                                                "username": $("#username").val(),
                                                "phone": $("#phone").val(),
                                                "email": $("#email").val(),
                                                //"sex": v,
                                                "pic": $("#pic").val()

                                            }),
                                            success: function (data) {
                                                var jsonResult = data;
                                                alert("成功：" + jsonResult);
                                                location.reload()
                                            },
                                            error: function (date) {
                                                alert("失败：" + date);
                                            }
                                        });
                                    });
                                    $("#embody").click(function () {

                                        <!-- 表单验证 -->
                                        // var v = $("input:radio[name='sex']:checked").val()
                                        // $.ajax({
                                        //     type: "post",
                                        //     url: "/uploaduser",
                                        //     contentType: "application/json; charset=utf-8",
                                        //     datatype: "json",
                                        //     data: JSON.stringify({
                                        //         "money" : 0
                                        //     }),
                                        //     success: function () {
                                        //         alert("提现成功");
                                        //         location.reload()
                                        //     },
                                        //     error: function () {
                                        //         alert("提现失败");
                                        //     }
                                        // });
                                    });
                                    //上传图片
                                    function uploadPic() {
                                        //获取表单数据
                                        var formdata = new FormData();
                                        console.log(document.getElementById("file").files[0])
                                        formdata.append("file", document.getElementById("file").files[0]);
                                        $.ajax({
                                            method:"post",
                                            url:"/uploadFile",
                                            data: formdata,
                                            dataType: 'JSON',
                                            contentType: false, // 告诉jquery不要设置content-Type请求头
                                            processData:false, //  告诉jquery不要处理发送的数据
                                            success: function(data) {
                                                console.log(data)
                                            },
                                            error: function(data) {
                                                console.log(data.responseText)
                                                $("#pic").val(data.responseText)
                                                $("#pic1").attr("src","../static/upload/"+data.responseText)
                                            }
                                        })
                                    }
                                </script>

                            </div>
                        </div>
                        <!--页码块-->
                    </div>
                    <!-- 订单管理模块 -->
                    <div role="tabpanel" class="tab-pane " id="order">
                        <div class="check-div form-inline">
                            <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addSource">添加资源</button>
                        </div>
                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 ">
                                    编码
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                                    订单名称
                                </div>
                                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                                    订单ID
                                </div>
                                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                                    操作
                                </div>
                            </div>
                            <div class="tablebody" id="orderId">
<!--                                <div class="row ">-->
<!--                                    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1 levl3 ">-->
<!--                                        3-->
<!--                                    </div>-->
<!--                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 levl3">-->
<!--                                        <span></span><span>人员信息</span>-->
<!--                                    </div>-->
<!--                                    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">-->
<!--                                        /admin/system/userlist/software/-->
<!--                                    </div>-->
<!--                                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">-->
<!--                                        <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeSource">修改</button>-->
<!--                                        <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteSource">删除</button>-->
<!--                                    </div>-->
<!--                                </div>-->


                            </div>
                        </div>

                        <script type="text/javascript">
                            $(function () {
                                $.ajax({
                                    type:"post",
                                    url:"/getUserOrder",
                                    contentType: "application/json; charset=utf-8",
                                    async:true,
                                    data:JSON,
                                    success:function(data){
                                        console.log(data);
                                        var array = data;
                                       $.each(array,function (i,values) {
                                           console.log(values)
                                            $("#orderId").append(" <div class=\"row \">\n" +
                                            "                       <div class=\"col-lg-1 col-md-1 col-sm-1 col-xs-1 levl3 \">\n" +
                                            "                             "+i+"\n" +
                                            "                                 </div>\n" +
                                            "                                 <div class=\"col-lg-4 col-md-4 col-sm-4 col-xs-4 levl3\">\n" +
                                            "                                 <span></span><span>"+values.sudject+"</span>\n" +
                                            "                             </div>\n" +
                                            "                             <div class=\"col-lg-5 col-md-5 col-sm-5 col-xs-5\">\n" +
                                            "                                 "+values.orderId+"\n" +
                                            "                                 </div>\n" +
                                            "                                 <div class=\"col-lg-2 col-md-2 col-sm-2 col-xs-2\">\n" +
                                            "                                 <button class=\"btn btn-success btn-xs\" data-toggle=\"modal\" data-target=\"#changeSource\">修改</button>\n" +
                                            "                                 <button class=\"btn btn-danger btn-xs\" data-toggle=\"modal\" data-target=\"#deleteSource\">删除</button>\n" +
                                            "                                 </div>\n" +
                                            "                                 </div>")
                                       })
                                    },
                                    error: function (data) {
                                        alert("网络异常"+data);
                                    }
                                });
                            })
                        </script>
                        <!--页码块-->
                        <footer class="footer">
                            <ul class="pagination">
                                <li>
                                    <select>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        <option>7</option>
                                        <option>8</option>
                                        <option>9</option>
                                        <option>10</option>
                                    </select>
                                    页
                                </li>
                                <li class="gray">
                                    共20页
                                </li>
                                <li>
                                    <i class="glyphicon glyphicon-menu-left">
                                    </i>
                                </li>
                                <li>
                                    <i class="glyphicon glyphicon-menu-right">
                                    </i>
                                </li>
                            </ul>
                        </footer>
                        <!--弹出窗口 添加资源-->
                        <div class="modal fade" id="addSource" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">添加资源</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <form class="form-horizontal">
                                                <div class="form-group ">
                                                    <label for="sName" class="col-xs-3 control-label">名称：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sLink" class="col-xs-3 control-label">链接：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="" class="form-control input-sm duiqi" id="sLink" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sOrd" class="col-xs-3 control-label">排序：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">父节点：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="exampleInput1" class="col-xs-3 control-label">资源类型：</label>
                                                    <div class="col-xs-8">
                                                        <label class="control-label" for="anniu">
                                                            <input type="radio" name="leixing" id="anniu">菜单</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <label class="control-label" for="meun">
                                                            <input type="radio" name="leixing" id="meun"> 按钮</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-xs btn-white" data-dismiss="modal">取 消</button>
                                        <button type="button" class="btn btn-xs btn-xs btn-green">保 存</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

                        <!--修改资源弹出窗口-->
                        <div class="modal fade" id="changeSource" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">修改资源</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <form class="form-horizontal">
                                                <div class="form-group ">
                                                    <label for="sName" class="col-xs-3 control-label">名称：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sLink" class="col-xs-3 control-label">链接：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="" class="form-control input-sm duiqi" id="sLink" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sOrd" class="col-xs-3 control-label">排序：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">父节点：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="exampleInput1" class="col-xs-3 control-label">资源类型：</label>
                                                    <div class="col-xs-8">
                                                        <label class="control-label" for="anniu">
                                                            <input type="radio" name="leixing" id="anniu">菜单</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <label class="control-label" for="meun">
                                                            <input type="radio" name="leixing" id="meun"> 按钮</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                        <button type="button" class="btn btn-xs btn-green">保 存</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->
                        <!--弹出删除资源警告窗口-->
                        <div class="modal fade" id="deleteSource" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            确定要删除该资源？删除后不可恢复！
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                        <button type="button" class="btn btn-xs btn-danger">保 存</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->
                    </div>
                    <!-- 权限管理模块 -->
                    <div role="tabpanel" class="tab-pane" id="char">

                        <div class="check-div">
                            <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addChar">添加权限</button>
                        </div>
                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-xs-1 ">
                                    编码
                                </div>
                                <div class="col-xs-4">
                                    权限名
                                </div>
                                <div class="col-xs-5">
                                    描述
                                </div>
                                <div class="col-xs-2">
                                    操作
                                </div>
                            </div>
                            <div class="tablebody">
                                <div class="row">
                                    <div class="col-xs-1 ">
                                        1
                                    </div>
                                    <div class="col-xs-4">
                                    </span><span>管理员</span>
                            </div>
                            <div class="col-xs-5">
                                管理员具有超年权限
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#changeChar">修改</button>
                                <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteChar">删除</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-1 ">
                                2
                            </div>
                            <div class="col-xs-4">
                                <span>游客</span>
                            </div>
                            <div class="col-xs-5">
                                可以查看信息
                            </div>
                            <div class="col-xs-2">
                                <button class="btn btn-success btn-xs">修改</button>
                                <button class="btn btn-danger btn-xs">删除</button>
                            </div>
                        </div>

                    </div>

                </div>
                <!--页码块-->
                <footer class="footer">
                    <ul class="pagination">
                        <li>
                            <select>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                                <option>6</option>
                                <option>7</option>
                                <option>8</option>
                                <option>9</option>
                                <option>10</option>
                            </select>
                            页
                        </li>
                        <li class="gray">
                            共20页
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-menu-left">
                            </i>
                        </li>
                        <li>
                            <i class="glyphicon glyphicon-menu-right">
                            </i>
                        </li>
                    </ul>
                </footer>
                <!--增加权限弹出窗口-->
                <div class="modal fade" id="addChar" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">添加权限</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="sName" class="col-xs-3 control-label">权限名：</label>
                                            <div class="col-xs-6 ">
                                                <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sLink" class="col-xs-3 control-label">描述：</label>
                                            <div class="col-xs-6 ">
                                                <textarea class="form-control input-sm duiqi"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sOrd" class="col-xs-3 control-label">系统资源：</label>
                                            <div class="col-xs-6">
                                                <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-green">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

                <!--修改权限弹出窗口-->
                <div class="modal fade" id="changeChar" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">修改权限</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="sName" class="col-xs-3 control-label">权限名：</label>
                                            <div class="col-xs-6 ">
                                                <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sLink" class="col-xs-3 control-label">描述：</label>
                                            <div class="col-xs-6 ">
                                                <textarea class="form-control input-sm duiqi"></textarea>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sOrd" class="col-xs-3 control-label">系统资源：</label>
                                            <div class="col-xs-6">
                                                <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                            </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-green">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

                <!--弹出删除权限警告窗口-->
                <div class="modal fade" id="deleteChar" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    确定要删除该权限？删除后不可恢复！
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-danger">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

            </div>
                    <!--用户管理模块-->
                    <div role="tabpanel" class="tab-pane" id="user">
                        <div class="check-div form-inline">
                            <div class="col-xs-3">
                                <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#addUser">添加用户 </button>
                            </div>
                            <div class="col-xs-4">
                                <input type="text" class="form-control input-sm" placeholder="输入文字搜索">
                                <button class="btn btn-white btn-xs ">查 询 </button>
                            </div>
                            <div class="col-lg-3 col-lg-offset-2 col-xs-4" style=" padding-right: 40px;text-align: right;">
                                <label for="paixu">排序:&nbsp;</label>
                                <select class=" form-control">
                                    <option>地区</option>
                                    <option>地区</option>
                                    <option>班期</option>
                                    <option>性别</option>
                                    <option>年龄</option>
                                    <option>份数</option>
                                </select>
                            </div>
                        </div>
                        <div class="data-div">
                            <div class="row tableHeader">
                                <div class="col-xs-2 ">
                                    用户名
                                </div>
                                <div class="col-xs-2">
                                    地区
                                </div>
                                <div class="col-xs-2">
                                    真实姓名
                                </div>
                                <div class="col-xs-2">
                                    电话
                                </div>
                                <div class="col-xs-2">
                                    状态
                                </div>
                                <div class="col-xs-2">
                                    操作
                                </div>
                            </div>
                            <div class="tablebody">

                                <div class="row">
                                    <div class="col-xs-2 ">
                                        goodmoning
                                    </div>
                                    <div class="col-xs-2">
                                        国际关系地区
                                    </div>
                                    <div class="col-xs-2">
                                        李豆豆
                                    </div>
                                    <div class="col-xs-2">
                                        13688889999
                                    </div>
                                    <div class="col-xs-2">
                                        状态
                                    </div>
                                    <div class="col-xs-2">
                                        <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#reviseUser">修改</button>
                                        <button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteUser">删除</button>
                                    </div>
                                </div>

                            </div>

                        </div>
                        <!--页码块-->
                        <footer class="footer">
                            <ul class="pagination">
                                <li>
                                    <select>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        <option>7</option>
                                        <option>8</option>
                                        <option>9</option>
                                        <option>10</option>
                                    </select>
                                    页
                                </li>
                                <li class="gray">
                                    共20页
                                </li>
                                <li>
                                    <i class="glyphicon glyphicon-menu-left">
                                    </i>
                                </li>
                                <li>
                                    <i class="glyphicon glyphicon-menu-right">
                                    </i>
                                </li>
                            </ul>
                        </footer>

                        <!--弹出添加用户窗口-->
                        <div class="modal fade" id="addUser" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">添加用户</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <form class="form-horizontal">
                                                <div class="form-group ">
                                                    <label for="sName" class="col-xs-3 control-label">用户名：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sLink" class="col-xs-3 control-label">真实姓名：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="" class="form-control input-sm duiqi" id="sLink" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sOrd" class="col-xs-3 control-label">电子邮箱：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">电话：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">地区：</label>
                                                    <div class="col-xs-8">
                                                        <select class=" form-control select-duiqi">
                                                            <option value="">国际关系地区</option>
                                                            <option value="">北京大学</option>
                                                            <option value="">天津大学</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">权限：</label>
                                                    <div class="col-xs-8">
                                                        <select class=" form-control select-duiqi">
                                                            <option value="">管理员</option>
                                                            <option value="">普通用户</option>
                                                            <option value="">游客</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="situation" class="col-xs-3 control-label">状态：</label>
                                                    <div class="col-xs-8">
                                                        <label class="control-label" for="anniu">
                                                            <input type="radio" name="situation" id="normal">正常</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <label class="control-label" for="meun">
                                                            <input type="radio" name="situation" id="forbid"> 禁用</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                        <button type="button" class="btn btn-xs btn-green">保 存</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

                        <!--弹出修改用户窗口-->
                        <div class="modal fade" id="reviseUser" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">修改用户</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            <form class="form-horizontal">
                                                <div class="form-group ">
                                                    <label for="sName" class="col-xs-3 control-label">用户名：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sLink" class="col-xs-3 control-label">真实姓名：</label>
                                                    <div class="col-xs-8 ">
                                                        <input type="" class="form-control input-sm duiqi" id="sLink" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sOrd" class="col-xs-3 control-label">电子邮箱：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">电话：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">地区：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="sKnot" class="col-xs-3 control-label">权限：</label>
                                                    <div class="col-xs-8">
                                                        <input type="" class="form-control input-sm duiqi" id="sKnot" placeholder="">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="situation" class="col-xs-3 control-label">状态：</label>
                                                    <div class="col-xs-8">
                                                        <label class="control-label" for="anniu">
                                                            <input type="radio" name="situation" id="normal">正常</label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <label class="control-label" for="meun">
                                                            <input type="radio" name="situation" id="forbid"> 禁用</label>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                        <button type="button" class="btn btn-xs btn-green">保 存</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

                        <!--弹出删除用户警告窗口-->
                        <div class="modal fade" id="deleteUser" role="dialog" aria-labelledby="gridSystemModalLabel">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                        <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                                    </div>
                                    <div class="modal-body">
                                        <div class="container-fluid">
                                            确定要删除该用户？删除后不可恢复！
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                        <button type="button" class="btn  btn-xs btn-danger">保 存</button>
                                    </div>
                                </div>
                                <!-- /.modal-content -->
                            </div>
                            <!-- /.modal-dialog -->
                        </div>
                        <!-- /.modal -->

                    </div>
                    <!-- 修改密码模块 -->
                    <div role="tabpanel" class="tab-pane" id="chan">
                        <div class="check-div">
                            原始密码为123456
                        </div>
                        <div style="padding: 50px 0;margin-top: 50px;background-color: #fff; text-align: right;width: 420px;margin: 50px auto;">
                            <form class="form-horizontal" id="fromPassword">
                                <div class="form-group">
                                    <label for="sKnot" class="col-xs-4 control-label" >原密码：</label>
                                    <div class="col-xs-5">
                                        <input type="text" class="form-control input-sm duiqi" id="oldPassword" placeholder="" style="margin-top: 7px;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="sKnot" class="col-xs-4 control-label" >新密码：</label>
                                    <div class="col-xs-5">
                                        <input type="text" class="form-control input-sm duiqi" id="newPassword" placeholder="" style="margin-top: 7px;">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="sKnot" class="col-xs-4 control-label" >重复密码：</label>
                                    <div class="col-xs-5">
                                        <input type="text" class="form-control input-sm duiqi" id="rePassword" placeholder="" style="margin-top: 7px;">
                                    </div>
                                </div>
                                <div class="form-group text-right">
                                    <div class="col-xs-offset-4 col-xs-5" style="margin-left: 169px;">
                                        <button type="reset" class="btn btn-xs btn-white">取 消</button>
                                        <button type="button" class="btn btn-xs btn-green" id="passwordBtn">保存</button>
                                    </div>
                                </div>
                            </form>
                        </div>

                    </div>
                    <!--修改密码AJAX-->
                    <script type="text/javascript">
                        $(function () {
                            $("#fromPassword").validate({
                                rules: {
                                    newPassword: {
                                        required: true,
                                        rangelength: [6, 12]
                                    },
                                    rePassword: {
                                        required: true,
                                        rangelength: [6, 12],
                                        equalTo: "#password"
                                    }
                                },
                                messages: {
                                    newPassword: {
                                        required: "密码不能为空",
                                        rangelength: "至少输入6个字符,但是不超过12个字符"
                                    },
                                    rePassword: {
                                        required: "密码不能为空",
                                        rangelength: "至少输入6个字符,但是不超过12个字符",
                                        equalTo: "两次密码输入不一致"
                                    }
                                }
                            });
                            // 按钮点击事件
                            $("#passwordBtn").click(function () {
                                alert($("#oldPassword").val())
                                $.ajax({
                                    type: "post",
                                    url: "/uploadPassword",
                                    data: {
                                        "oldPassword": $("#oldPassword").val(),
                                        "password": $("#newPassword").val()


                                    },
                                    success: function (data) {
                                        var jsonResult = data;
                                        alert("成功：" + jsonResult);
                                        location.reload()
                                    },
                                    error: function (date) {
                                        alert("失败：原密码错误" + date);
                                    }
                                });
                            });
                        })

                    </script>

                <!--弹出添加用户窗口-->
                <div class="modal fade" id="addSchool" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">添加地区</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="sName" class="col-xs-3 control-label">地区名称：</label>
                                            <div class="col-xs-8 ">
                                                <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="sName" class="col-xs-3 control-label">经度：</label>
                                            <div class="col-xs-8 ">
                                                <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sLink" class="col-xs-3 control-label">纬度：</label>
                                            <div class="col-xs-8 ">
                                                <input type="" class="form-control input-sm duiqi" id="sLink" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sOrd" class="col-xs-3 control-label">简称：</label>
                                            <div class="col-xs-8">
                                                <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-green">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

                <!--弹出修改用户窗口-->
                <div class="modal fade" id="reviseSchool" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">修改地区</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    <form class="form-horizontal">
                                        <div class="form-group ">
                                            <label for="sName" class="col-xs-3 control-label">地区名称：</label>
                                            <div class="col-xs-8 ">
                                                <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group ">
                                            <label for="sName" class="col-xs-3 control-label">经度：</label>
                                            <div class="col-xs-8 ">
                                                <input type="email" class="form-control input-sm duiqi" id="sName" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sLink" class="col-xs-3 control-label">纬度：</label>
                                            <div class="col-xs-8 ">
                                                <input type="" class="form-control input-sm duiqi" id="sLink" placeholder="">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="sOrd" class="col-xs-3 control-label">简称：</label>
                                            <div class="col-xs-8">
                                                <input type="" class="form-control input-sm duiqi" id="sOrd" placeholder="">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-green">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

                <!--弹出删除用户警告窗口-->
                <div class="modal fade" id="deleteSchool" role="dialog" aria-labelledby="gridSystemModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                            </div>
                            <div class="modal-body">
                                <div class="container-fluid">
                                    确定要删除该地区？删除后不可恢复！
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                                <button type="button" class="btn btn-xs btn-danger">保 存</button>
                            </div>
                        </div>
                        <!-- /.modal-content -->
                    </div>
                    <!-- /.modal-dialog -->
                </div>
                <!-- /.modal -->

            </div>

        </div>
    </div>
</div>
<!-- 滑块js -->
<!--	<script type="text/javascript">
        scale = function(btn, bar, title, unit) {
                this.btn = document.getElementById(btn);
                this.bar = document.getElementById(bar);
                this.title = document.getElementById(title);
                this.step = this.bar.getElementsByTagName("div")[0];
                this.unit = unit;
                this.init();
        };
        scale.prototype = {
                init: function() {
                        var f = this,
                                g = document,
                                b = window,
                                m = Math;
                        f.btn.onmousedown = function(e) {
                                var x = (e || b.event).clientX;
                                var l = this.offsetLeft;
//						var max = f.bar.offsetWidth - this.offsetWidth;
                                var max = f.bar.offsetWidth-20 ;
                                g.onmousemove = function(e) {
                                        var thisX = (e || b.event).clientX;
                                        var to = m.min(max, m.max(-2, l + (thisX - x)));
                                        f.btn.style.left = to+ 'px';
                                        f.ondrag(m.round(m.max(0, to / max) * 100), to);
                                        b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
                                };
                                g.onmouseup = new Function('this.onmousemove=null');
                        };
                },
                ondrag: function(pos, x) {
                        this.step.style.width = Math.max(0, x) +2+ 'px';
                        this.title.innerHTML = pos / 10 + this.unit + "";
                }
        }
        new scale('btn0', 'bar0', 'title0', "分钟");
        new scale('btn1', 'bar1', 'title1', "分钟");
        new scale('btn2', 'bar2', 'title2', "天");
        new scale('btn3', 'bar3', 'title3', "次");
</script>
-->
<script src="static/person/js/jquery.nouislider.js"></script>

<!-- this page specific inline scripts -->
<script>
                                                //min/max slider
                                                function huadong(my, unit, def, max) {
                                                    $(my).noUiSlider({
                                                        range: [0, max],
                                                        start: [def],
                                                        handles: 1,
                                                        connect: 'upper',
                                                        slide: function() {
                                                            var val = Math.floor($(this).val());
                                                            $(this).find(".noUi-handle").text(
                                                                    val + unit
                                                                    );
                                                            console.log($(this).find(".noUi-handle").parent().parent().html());
                                                        },
                                                        set: function() {
                                                            var val = Math.floor($(this).val());
                                                            $(this).find(".noUi-handle").text(
                                                                    val + unit
                                                                    );
                                                        }
                                                    });
                                                    $(my).val(def, true);
                                                }
                                                huadong('.slider-minmax1', "分钟", "5", 30);
                                                huadong('.slider-minmax2', "分钟", "6", 15);
                                                huadong('.slider-minmax3', "分钟", "10", 60);
                                                huadong('.slider-minmax4', "次", "2", 10);
                                                huadong('.slider-minmax5', "天", "3", 7);
                                                huadong('.slider-minmax6', "天", "8", 10);
</script>
</body>

</html>